<template>
  <div class="app-container">
    <el-row>
      <el-card shadow="false" class="box-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="1">
            <el-form ref="formDataOne" label-width="120px" :model="formDataOne" :rules="rulesOne">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车辆编号：" style="width: 80%;" prop="truckTypeId">
                    <el-input v-if="isEdit" v-model="formDataOne.truckTypeId" disabled placeholder="请输入车辆编号" />
                    <span v-else>{{ formDataOne.truckTypeId||'--' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车牌号码：" style="width: 80%;" prop="licensePlate">
                    <el-input v-if="isEdit" v-model="formDataOne.licensePlate" placeholder="请输入车牌号码" />
                    <span v-else>{{ formDataOne.licensePlate||'--' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车型名称：" style="width: 80%;" prop="truckTypeName">
                    <el-select v-if="isEdit" v-model="formDataOne.truckTypeName" clearable placeholder="请选择车型名称">
                      <el-option v-for="item in carType" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <span v-else>{{ formDataOne.truckTypeName||'--' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车辆体积：" style="width: 80%;" prop="allowableVolume">
                    <el-input v-if="isEdit" v-model="formDataOne.allowableVolume" placeholder="请输入车辆体积" />
                    <span v-else>{{ formDataOne.allowableVolume }} m³</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆载重：" style="width: 80%;" prop="allowableLoad">
                    <el-input v-if="isEdit" v-model="formDataOne.allowableLoad" placeholder="请输入车辆载重" />
                    <span v-else>{{ formDataOne.allowableLoad }} 吨</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="GPSID：" style="width: 78%;" prop="deviceGpsId">
                    <el-input v-if="isEdit" v-model="formDataOne.deviceGpsId" placeholder="请输入GPSID" />
                    <span v-else>{{ formDataOne.deviceGpsId||'--' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车辆体积：" style="width: 80%;">
                    <img class="img" src="" alt="">
                    <!-- <span>123</span> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="行驶证信息" name="2">
            <el-form ref="formDataTwo" label-width="120px" :model="formDataTwo" :rules="rulesTwo">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="行驶证号码：" style="width: 80%;" prop="transportCertificateNumber">
                    <el-input v-if="isEdit" v-model="formDataOne.transportCertificateNumber" placeholder="请输入行驶证号码" />
                    <span v-else>{{ formDataTwo.transportCertificateNumber||'--' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发动机号码：" style="width: 80%;" prop="engineNumber">
                    <el-input v-if="isEdit" v-model="formDataOne.engineNumber" placeholder="请输入发动机号码" />
                    <span v-else>{{ formDataTwo.engineNumber||'--' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="注册时间" prop="registrationDate" style="width: 80%;">
                    <div v-if="isEdit" class="block">
                      <el-date-picker
                        v-model="formDataTwo.registrationDate"
                        type="date"
                        placeholder="请选择注册事件"
                      />
                    </div>
                    <span v-else>--</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="强制报废日期：" prop="mandatoryScrap" style="width: 80%;">
                    <div v-if="isEdit" class="block">
                      <el-date-picker
                        v-model="formDataTwo.mandatoryScrap"
                        type="date"
                        placeholder="请选择强制报废日期"
                      />
                    </div>
                    <span v-else>--</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="整备质量：" style="width: 80%;" prop="overallQuality">
                    <el-input v-if="isEdit" v-model="formDataTwo.overallQuality" placeholder="请输入整备质量" />
                    <span v-else>{{ formDataTwo.overallQuality||'吨' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="校验有效期：" style="width: 78%;" prop="expirationDate">
                    <div v-if="isEdit" class="block">
                      <el-date-picker
                        v-model="formDataTwo.expirationDate"
                        type="date"
                        placeholder="请选择校验有效期"
                      />
                    </div>
                    <span v-else>--</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="核定载质量：" style="width: 80%;" prop="allowableWeight">
                    <el-input v-if="isEdit" v-model="formDataTwo.allowableWeight" placeholder="请输入核定载质量" />
                    <span v-else>{{ formDataTwo.allowableWeight||'0 吨' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="有效期：" style="width: 80%;" prop="validityPeriod">
                    <div v-if="isEdit" class="block">
                      <el-date-picker
                        v-model="formDataTwo.validityPeriod"
                        type="date"
                        placeholder="请选择行驶证有效期"
                      />
                    </div>
                    <span v-else>--</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车辆体积：" style="width: 80%;">
                    <img class="img" src="" alt="">
                    <!-- <span>123</span> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <!-- 按钮 -->
        <div v-if="isEdit===false" class="bottom clearfix">
          <el-button type="warning" class="button" @click="isEdit = true">编辑</el-button>
        </div>
        <div v-else class="bottom clearfix">
          <el-button type="warning" class="button" @click="saveFn">保存</el-button>
          <el-button type="warning" class="button" @click="cancelFn">取消</el-button>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getCarTruckApi, getCarTypeApi, getCarLicenseApi } from '@/api/carList'
export default {
  components: {},
  props: {},
  data() {
    return {
      activeName: '1', // 切换状态
      isEdit: false,
      carType: [],
      formDataOne: { // 基本信息表单内容
        truckTypeId: '',
        licensePlate: '',
        truckTypeName: '',
        allowableVolume: '',
        allowableLoad: '',
        deviceGpsId: ''
      },
      rulesOne: { // 基本信息表单校验
        licensePlate: [{ required: true, message: '车牌号码不能为空', trigger: 'blur' }],
        truckTypeName: [{ required: true, message: '车型名称不能为空', trigger: 'change' }],
        allowableVolume: [{ required: true, message: '车辆体积不能为空', trigger: 'blur' }],
        allowableLoad: [{ required: true, message: '车辆载重不能为空', trigger: 'blur' }],
        deviceGpsId: [{ required: true, message: 'GPSID不能为空', trigger: 'blur' }]
      },
      formDataTwo: { // 行驶证信息表单内容
        transportCertificateNumber: '',
        engineNumber: '',
        mandatoryScrap: '',
        overallQuality: '',
        allowableWeight: '',
        validityPeriod: '',
        expirationDate: '',
        registrationDate: ''
      },
      rulesTwo: { // 行驶证信息表单校验
        transportCertificateNumber: [{ required: true, message: '行驶证号码不能为空', trigger: 'blur' }],
        engineNumber: [{ required: true, message: '发动机号码不能为空', trigger: 'blur' }],
        mandatoryScrap: [{ required: true, message: '注册时间不能为空', trigger: 'change' }],
        overallQuality: [{ required: true, message: '强制报废日期不能为空', trigger: 'blur' }],
        allowableWeight: [{ required: true, message: '整备质量不能为空', trigger: 'blur' }],
        validityPeriod: [{ required: true, message: '校验有效期不能为空', trigger: 'change' }],
        expirationDate: [{ required: true, message: '核定载质量不能为空', trigger: 'blur' }],
        registrationDate: [{ required: true, message: '有效期不能为空', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.formDataOne = await getCarTruckApi(this.$route.params.id)
    this.formDataTwo = await getCarLicenseApi(this.$route.params.id)
    this.carType = await getCarTypeApi()
  },
  mounted() {},
  methods: {

  }
}
</script>

<style scoped lang="scss">
.app-container{
  .box-card{
    border: none;
  }
  .img{
    width: 212px;
    height: 159px;
    border: 1px solid rgb(216, 221, 227);
    border-radius: 4px;
    margin-right: 20px;
  }
  .ZhuShi{
    font-size: 12px;
    color: #bac0cd;
    display: inline-block;
    line-height: 17px;
    position: absolute;
    left: 40px;
    bottom: 0px;
    font-weight: 400;
  }
  // 按钮
    .bottom {
      display: flex;
      justify-content: center;
      .button{
      text-align: center;
      width: 110px;
      height: 40px;
      background-color:#e15536;
      color:#fff;
    }
  }
}
</style>
